.container-popup {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.popup-show {
  visibility: visible;
}

.popup-show .container-bg {
  display: block;
  //opacity: 1;
}

.container-bg {
  //opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  //z-index: 6;
  background: rgb(0, 0, 0);
  transition: all 0.3s ease-in-out;
}

.popup-bg {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 90;
}

.popup-content{
}

.popup-content-center {
}

.popup-content-left,
.popup-content-right{
  height: 100%;
}

.popup-content-top,
.popup-content-bottom{
  width: 100%;
}

.center {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.left {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  height: 100%;
}

.bottom {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
}

.center-lin-enter-class,
.center-lin-leave-to-class {
  transform: scale(0.8);
}

.center-lin-enter-active-class,
.center-lin-leave-active-class {
  transform: scale(1.2);
}

.center-lin-enter-to-class,
.center-lin-leave-class{
  transform: scale(1);
}

.left-lin-enter-class,
.left-lin-leave-to-class {
  transform: translate3d(-100%,0,0);
  height: 100%;
}

.left-lin-enter-active-class,
.left-lin-leave-active-class {
  transform: translate3d(-100%,0,0);
  height: 100%;
}

.left-lin-enter-to-class,
.left-lin-leave-class{
  transform: translate3d(0,0,0);
  height: 100%;
}


.right-lin-enter-class,
.right-lin-leave-to-class {
  transform: translate3d(100%,0,0);
  height: 100%;
}

.right-lin-enter-active-class,
.right-lin-leave-active-class {
  transform: translate3d(100%,0,0);
  height: 100%;
}

.right-lin-enter-to-class,
.right-lin-leave-class{
  transform: translate3d(0,0,0);
  height: 100%;
}

.top-lin-enter-class,
.top-lin-leave-to-class {
  transform: translate3d(0,-100%,0);
  width: 100%;
}

.top-lin-enter-active-class,
.top-lin-leave-active-class {
  transform: translate3d(0,-100%,0);
  width: 100%;
}

.top-lin-enter-to-class,
.top-lin-leave-class{
  transform: translate3d(0,0,0);
  width: 100%;
}


.bottom-lin-enter-class,
.bottom-lin-leave-to-class {
  transform: translate3d(0,100%,0);
  width: 100%;
}

.bottom-lin-enter-active-class,
.bottom-lin-leave-active-class {
  transform: translate3d(0,100%,0);
  width: 100%;
}

.bottom-lin-enter-to-class,
.bottom-lin-leave-class{
  transform: translate3d(0,0,0);
  width: 100%;
}
